<template>
  <div class="page admin">
    <el-card class="">
       
       <div>
         <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="评委" name="first"></el-tab-pane>
          <el-tab-pane label="审核员" name="second"></el-tab-pane>
        </el-tabs>
       </div>

        <div>
          <el-form :model="form" label-width="80px">
           <el-col v-if="show" :span='4' style="margin: 0 10px 10px 20px">
               <el-button type="primary" @click="showlog('生成评委', 150)" size="mini">生成评委账号</el-button>
           </el-col>
           <el-col v-if="!show" :span='4' style="margin: 0 10px 10px 20px">
               <el-button type="primary" @click="showlog('生成审核员', 50)" size="mini">生成审核账号</el-button>
           </el-col>
          </el-form>
        </div>
      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="index"
            label="序号"
            width="80px"
            >
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="220px"
            
            >
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="220px"
            >
          </el-table-column>
          <el-table-column
            prop="init_password"
            label="密码"
            >
          </el-table-column>
          <el-table-column
            prop="project_numb"
            label="已分配项目数"
            >
          </el-table-column>
          <el-table-column
            label="操作"
            >
            <template slot-scope="scope">
              <span class="point" @click="dis(scope.row)">分配项目</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
    </el-card>

    <dialogs  :title="title" :value="values" :show="showdialog" @updata="updata" @close="close"></dialogs>
    <projectbox :project='project' :id="id" :type="type" :title="titles" :show="showprojectbox" @updata="updata" @close="close"></projectbox>
    
  </div>
</template>

<script type="text/ecmascript-6">
import dialogs from "./dialog";
import projectbox from "./projectbox";
export default {
  data() {
    return {
      project: null,
      id:null,
      type: "judges",
      role: null,
      activeName: "first",
      values: null,
      title: "生成评委",
      titles: null,
      showdialog: false,
      showprojectbox: false,
      total: null,
      currentPage1: 1,
      project_title: null,
      dialogVisible: false,
      innerVisible: false,
      tableData: [],
      show: true,
      form: {
        projectTitle: null,
        state: null
      },
      options: [
        {
          value: null,
          label: "全部"
        },
        {
          value: false,
          label: "评审中"
        },
        {
          value: true,
          label: "已评审"
        }
      ],
      value: "",
      page: 1,
      table: {
        number1: null,
        number2: null,
        number3: null,
        number4: null
      }
    };
  },
  components: {
    dialogs,
    projectbox
  },
  computed: {
    // 计算属性的 getter
    totalScore: function() {
      // `this` 指向 vm 实例
      return (
        this.table.number1 +
        this.table.number2 +
        this.table.number3 +
        this.table.number4
      );
    }
  },
  methods: {
    dis(val) {
      console.log(val);
      this.id = val.id
      if (val.role === "judges") {
        this.type = "judges";
        this.project = val.subject
      } else {
        this.type = "auditor";
      }
      this.titles = `为${val.username}分配项目`;
      this.showprojectbox = true;
    },
    handleClick(tab, event) {
      console.log("tab切换－－－－》", tab, event);
      this.show = !this.show;

      if (tab.label === "审核员") {
        this.role = "auditor";
        this.getdata(this.page, "auditor");
      } else {
        this.role = "judges";
        this.getdata(this.page, "judges");
      }
    },
    updata() {
      console.log(this.page, this.role);
      this.getdata(this.page, this.role);
    },
    showlog(val, number) {
      this.showdialog = true;
      this.title = val;
      this.values = number;
      
    },
    close() {
      this.showdialog = false;
      this.showprojectbox = false;
    },
    handleSizeChange(val) {
      this.page = val;
      this.getdata(this.page, this.role);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getdata(this.page, this.role);
    },
    seach() {
      this.getdata(this.page, this.role);
    },
    getdata(page, role) {
      console.log('获取数据')
      this.$http
        .get(`/common/zh/list/${page}`, {
          params: {
            role: role
          }
        })
        .then(res => {
          this.total = res.data.total;
          this.tableData = res.data.data.map((data, index) => {
            data.state = true ? "已评审" : "评审中";
            // data.index = index + 1;
            data.index = `${this.page - 1 > 0 ? this.page - 1 : ''}` + `${index + 1}`;

            return data;
          });
        });
    },
    // show() {
    //   this.show = true;
    // },
    chack(val) {
      this.dialogVisible = true;
      this.project_title = "项目名称：" + val.project_title;
    }
  },
  mounted() {
    this.role = "judges";
    this.getdata(this.page, "judges");
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.point {
  cursor: pointer;
  color: #409EFF;
}
</style>
